<template>
  <view class="charts-box">
    <qiun-data-charts
      type="ring"
      :opts="opts"
      :chartData="chartData"
      tooltipFormat="takeHead"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      chartData: {
        series: [],
      },
      //您可以通过修改 config-ucharts.js 文件中下标为 ['ring'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
      opts: {
        rotate: false,
        rotateLock: false,
        color: ["#2ec446", "#36aef1", "#f13652", "#f0f136"],
        padding: [5, 5, 5, 5],
        dataLabel: false,
        enableScroll: false,
        legend: {
          show: true,
          position: "right",
          lineHeight: 25,
        },
        title: {
          name: "设备总台数",
          fontSize: 15,
          color: "#666666",
        },
        subtitle: {
          name: "0",
          fontSize: 25,
          color: "#7cb5ec",
        },
        extra: {
          ring: {
            ringWidth: 30,
            activeOpacity: 0.5,
            activeRadius: 10,
            offsetAngle: 0,
            labelWidth: 15,
            border: true,
            borderWidth: 3,
            borderColor: "#FFFFFF",
          },
        },
      },
    };
  },
  mounted() {},
  methods: {
    tooltipDemo1: function (item, category, index, opts) {
      console.log("item, category, index, opts", item, category, index, opts);
      return item.data + "天";
    },
    init(data) {
      this.opts = Object.assign(this.opts, data);
    },
    setData(data) {
      //模拟从服务器获取数据时的延时
      this.chartData = data;
    },
  },
};
</script>

<style scoped>
/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
.charts-box {
  width: 100%;
  height: 100%;
}
</style>
